<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>防抖和节流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .ipt {
            margin: 20px;
            padding: 15px;
        }

        .list {
            margin: 0 20px;
        }

        .list li {
            font-size: 20px;
            line-height: 36px;
        }
    </style>
</head>
<body>
    <input type="text" class="ipt">
    <ul class="list"></ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 192.160.0.100:3000/search?text=xxx

        $(".ipt").on("input", throttle(function (){
            // console.log(this.value);
            $.ajax({
                url: "http://192.160.0.100:3000/search",
                data: {
                    text: $(".ipt").val()
                },
                dataType: "json",
                success(res){
                    console.log(res);
                    var str = "";
                    for(var i = 0; i < res.data.length; i ++){
                        str += `<li>${ res.data[i] }</li>`;
                    }
                    $(".list").html(str);
                }
            })
        }, 50))

        // 稀释事件触发频率 --- 防抖和节流
        function throttle(func, wait){
            var startTime = Date.now();
            return function (){
                if(Date.now() - startTime > wait){
                    func();
                    startTime = Date.now();
                }
            }
        }


        /* $.ajax({
            url: "http://192.160.0.100:3000/search/add",
            type: 'POST',
            data: JSON.stringify({
                key: "zhangsa",
                value: ["张三丰", "长嫂为妻 小说", "张三疯", "张三甲", "张三李四", "张三影", "张三红", "张三丰弟子现代生活录", "张三斤和邱雪花是什么电视剧", "张三链子"]
            }),
            success(res){
                console.log(res);
            }
        }) */
    </script>
</body>
</html>